<?php if (!$ajax) {
    ?>
<div class="container" id="paging">
<?php
} ?>

    <div class="crumbs">
        <ul id="breadcrumbs" class="breadcrumb">
            <li><i class="icon-home"></i> <a href="layout.php">Products</a></li>
            <li class="current"><a href="pages_calendar.html" title=""><?php echo $title ?></a></li>
        </ul>
    </div>

    <div class="page-header">
        <div class="page-title"><h3><?php echo $title ?> products</h3></div>
        <ul class="page-stats">
            <li>
                <div class="summary"><span>Pending</span>

                    <h3><?php echo $pending; ?> products</h3></div>
            </li>
            <li>
                <div class="summary"><span>All</span>

                    <h3><?php echo $all; ?> products</h3></div>
            </li>
        </ul>
    </div>

    <div id="cont">
        <div class="row">
            <?php
            foreach ($products as $product) {
                ?>
                <div class="col-sm-6 col-md-3">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-content">
                            <img style="height: 115px" src="<?php echo $product->url ?>"/>

                            <div class="title" tooltip="<?php echo $product->name ?>" tooltip-persistent>
                                <?php
                                echo substr($product->name, 0, 20);
                                if (strlen($product->name) > 20)
                                    echo "...";
                                ?>
                            </div>
                            <div class="value">$<?php echo $product->price ?></div>
                            <a class="more" href="http://localhost/admin/product/detail/<?php echo $product->id ?>">View
                                More <i
                                    class="pull-right icon-angle-right"></i></a></div>
                    </div>
                </div>
            <?php
            }
            ?>
        </div>
        <div id="jquery_link" align="center">
            <?php echo $pagination; ?>
        </div>
    </div>

    <!--    <div hidden="hidden" id="loading" style="background: rgba(0, 0, 0, 0.7); top: 0px; left: 0px; width: 100%; height: 100%; z-index: 99; position: fixed; padding-top: 80px; margin-bottom: 80px;">-->

</div>
    <?php if (!$ajax) {
    ?>
    </div>
        <?php
        } ?>
<style>
    [tooltip]:before {
        /* needed - do not touch */
        content: attr(tooltip);
        position: absolute;
        opacity: 0;

        /* customizable */
        transition: all 0.15s ease;
        padding: 10px;
        color: #555;
        box-shadow: 2px 2px 1px silver;
    }

    [tooltip]:hover:before {
        /* needed - do not touch */
        opacity: 1;

        /* customizable */
        background: #fff;
        border: 1px solid #c0c0c0;
        margin-top: -50px;
        margin-left: 20px;
        width: 100%;
        z-index: 99;
        text-align: left;
    }

    [tooltip]:not([tooltip-persistent]):before {
        pointer-events: none;
    }
</style>
<script type="text/javascript">
    $("#jquery_link li a").each(function(i,e){
        $(e).attr('data',$(e).attr('href'));
        $(e).attr('href','#');
    })

    $("#jquery_link li a").click(function () {
        var url = $(this).attr("data");
        //console.log($(this).attr("data"));
        $.ajax({
            type: "POST",
            url: url,
            data: {
                ajax: 1
            },
            async: true,
//            beforeSend: function () {
//                $("#loading").fadeIn();
//            },
            success: function (kq) {
                $("#paging").html(kq);
            }
        })
        return false;
    });
</script>